import React, { useState } from 'react';
import { useInventory } from '../contexts/inventoryContext';
import { motion, AnimatePresence } from 'framer-motion';

interface AddCategoryModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export const AddCategoryModal: React.FC<AddCategoryModalProps> = ({ isOpen, onClose }) => {
  const { addCategory } = useInventory();
  const [categoryName, setCategoryName] = useState('');
  const [initialStock, setInitialStock] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    const stock = initialStock ? parseInt(initialStock, 10) : 0;
    
    if (stock < 0) {
      alert('初始库存不能为负数');
      return;
    }
    
    addCategory(categoryName, stock);
    setCategoryName('');
    setInitialStock('');
    onClose();
  };

  const handleOverlayClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50 backdrop-blur-sm"
          onClick={handleOverlayClick}
        >
          <motion.div
            initial={{ scale: 0.9, y: 20 }}
            animate={{ scale: 1, y: 0 }}
            exit={{ scale: 0.9, y: 20 }}
            className="bg-white dark:bg-gray-800 rounded-xl p-6 w-full max-w-md shadow-2xl border border-gray-100 dark:border-gray-700"
          >
            <h2 className="text-2xl font-bold mb-4 text-gray-800 dark:text-white">添加商品分类</h2>
            
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label htmlFor="categoryName" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  分类名称
                </label>
                <input
                  type="text"
                  id="categoryName"
                  value={categoryName}
                  onChange={(e) => setCategoryName(e.target.value)}
                  placeholder="请输入商品分类名称"
                  className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                  autoFocus
                  maxLength={50}
                />
              </div>
              
              <div>
                <label htmlFor="initialStock" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  初始库存数量
                </label>
                <input
                  type="number"
                  id="initialStock"
                  value={initialStock}
                  onChange={(e) => {
                    // 只允许输入数字和空字符串
                    if (e.target.value === '' || /^\d+$/.test(e.target.value)) {
                      setInitialStock(e.target.value);
                    }
                  }}
                  placeholder="0"
                  className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                  min="0"
                />
              </div>
              
              <div className="flex space-x-3 pt-2">
                <button
                  type="button"
                  onClick={onClose}
                  className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                >
                  取消
                </button>
                <button
                  type="submit"
                  className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                >
                  添加
                </button>
              </div>
            </form>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};